<template>
  <div class="ele-body aging" >
    <el-card shadow="never" class="topCard">
      <div >工单回访率</div>
      <div >目标：了解并跟踪某要求的期限内工单回访状况，对售后跟踪流程予以完善，改善服务质量和提升客户满意度。</div>
      <div >含义：某个已定义的周期内，统计所有已完成回访的工单占应回访工单的比率，并从工单类型、组织部门维度对比回访率高低。</div>
      <div >点击数据可看详情</div>
    </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="queryForm" class="ele-form-search" label-width="77px" @keyup.enter.native="reload"
               @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="部门:">
              <el-select v-model="queryForm.zone_id" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.zone_id"
                  :label="item.zone_name"
                  :value="item.zone_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="工单类型:">
              <el-select v-model="queryForm.wo_type" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="选择时间:">
              <CustomDate v-model="queryForm.date" :type.sync="queryForm.type"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button class="ele-btn-icon" icon="el-icon-search" type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ele-body" shadow="never" v-loading="loading">
      <div class="content">
        <returnChart :data="data" @getTab="getTab"/>
      </div>
    </el-card>
    <el-card class="ele-body" shadow="never" v-loading="loading" v-show='showDetail'>
      <dataTable  :query="queryForm" :dataHeader="data.labels" ref="DataTable"/>
    </el-card>
  </div>
</template>
<script>
import CustomDate from "@components/CustomDate.vue"
import returnChart from "@/views/reports/workorder-monitoring/components/returnChart.vue";
import dataTable from "@/views/reports/workorder-monitoring/components/dataTable.vue";

export default {
  components: {CustomDate, returnChart,dataTable},
  data() {
    return {
      showDetail:false,
      loading:false,
      data:{},
      queryForm: {},
      options1: [],
      options2: [],
    }
  },
  methods: {
    // 获取列表
    getTab(){
      this.showDetail=true
      this.$refs.DataTable.init()
    },
    getParams(){
      this.$http.get('wos/params').then(res => {
        if (res.data.code === 0) {
          this.options1=res.data.data.wo_types
        } else {
          this.$message.error(res.data.msg);
        }
      })
      this.$http.get('/reports/zones').then(res => {
        if (res.data.code === 0) {
          this.options2=res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },

    getData(){
      let month_start
      let month_end
      if(this.queryForm.date){
        month_start=this.queryForm.date[0]
        month_end=this.queryForm.date[1]
      }
      this.loading=true
      this.$http.get('/reports/wo_receipt', {params:{...this.queryForm,month_start:month_start,month_end:month_end}}).then(res => {
        if (res.data.code === 0) {
          this.data=res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
        this.loading=false
      })
    },
    reload() {
      this.getData()
      this.showDetail=false
    },
    reset() {
      this.showDetail=false
      this.queryForm = {}
      this.getData()
    }
  },
  mounted() {
    this.getParams()
    this.getData()
  },
}
</script>

<style scoped lang="scss">
.aging {
  div:nth-child(2){
    ::v-deep.el-card__body {
      padding-bottom: 0;
    }
  }
}
.topCard{
  ::v-deep div:not(:first-child){
    margin-top: 10px;
  }
  div:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #262626
  }
}
</style>

